import React from "react";
import { Space, Table, Tag } from "antd";
import type { TableProps } from "antd";
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
function Tables() {
  interface DataType {
    key: string;
    name: string;
    id: string;
    tags: string[];
    nums: number;
    znums: number;
    today: number;
    status: string[];
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "主题页id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "类型",
      dataIndex: "tags",
      key: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "loser";
            if (tag === "外部链接") {
              color = "volcano";
            } else {
              color = "geekblue";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "商品数",
      key: "nums",
      dataIndex: "nums",
    },
    {
      title: "总订单数",
      key: "znums",
      dataIndex: "znums",
    },
    {
      title: "今日GMV",
      key: "today",
      dataIndex: "today",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (_, { status }) => (
        <>
          {status.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "loser";
            if (tag === "已上线") {
              color = "volcano";
            } else {
              color = "geekblue";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Space size="middle">
          <FormOutlined style={{ fontSize: "20px", color: "#6388d1" }} />
          <DeleteOutlined style={{ fontSize: "20px", color: "#ff5722" }} />
        </Space>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      name: "限时秒杀",
      id: "2id",
      tags: ["内部链接"],
      nums: 1,
      znums: 100,
      today: 2030,
      status: ["已上线"],
    },
    {
      key: "2",
      name: "限时秒杀",
      id: "6id",
      tags: ["外部链接"],
      nums: 1,
      znums: 100,
      today: 2030,
      status: ["已下线"],
    },
    {
      key: "3",
      name: "限时秒杀",
      id: "3id",
      tags: ["内部链接"],
      nums: 1,
      znums: 100,
      today: 2030,
      status: ["已上线"],
    },
    {
      key: "4",
      name: "限时秒杀",
      id: "3id",
      tags: ["内部链接"],
      nums: 12,
      znums: 100,
      today: 2030,
      status: ["已上线"],
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        scroll={{ y: 158, x: 120 }}
        style={{ borderRadius: "15px" }}
      />
    </div>
  );
}

export default Tables;
